import classNames from 'classnames'
const Main = ({ list, delComment, Change }) => {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {list.map((item) => (
          <li
            key={item.id}
            className={classNames(item.isDone ? null : 'completed')}
          >
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.isDone ? true : false}
                onChange={() => Change(item.id)}
              />
              <label>{item.content}</label>
              <button
                className="destroy"
                onClick={() => delComment(item.id)}
              ></button>
            </div>
            <input className="edit" />
          </li>
        ))}
      </ul>
    </section>
  )
}

export default Main
